<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML表格</title>
	<style>
		caption {
			font:bold 32px/48px '微软雅黑';
			letter-spacing: 10px;	
		}
		table {
			border:1px solid #ccc;
			width:300px;
			border-collapse: collapse;
			background-color: #FFF;
		}

		th,td {
			width: 150px;
			border-bottom:1px solid #ccc;
		}

		th {
			background-color:#EEE;
			border-bottom: 1px solid #333;
		}

		td {
			text-align: center;
		}

		.tem4-failure td {
			background-color: #FF2800;
			color:#fff;
		}

		#nameInput {
			width: 85px;
		}

		#markInput {
			width: 50px;
		}

		.input-data {
			position: absolute;
			left:350px;
			top:50px;
		}

	</style>
</head>
<body>
	<table>
		<caption>专四成绩表</caption>
		<thead>
			<tr>
				<th>姓名</th>
				<th>成绩</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td colspan='2'>这真的只是一张成绩表</td>
			</tr>
		</tfoot>
		<tbody id='mark-table'>
			<tr class='tem4-failure'>
				<td>冯亚</td>
				<td>53</td>
			</tr>
			<tr class='tem4-pass'>
				<td>卿玉平</td>
				<td>81</td>
			</tr>
			<tr class='tem4-pass'>
				<td>谢一尘</td>
				<td>72</td>
			</tr>
			<tr class='tem4-failure'>
				<td>傅健</td>
				<td>48</td>
			</tr>
			<tr class='tem4-failure'>
				<td>张娇</td>
				<td>49</td>
			</tr>
			<tr class='tem4-pass'>
				<td>黄雅婷</td>
				<td>66</td>
			</tr>
			<tr class='tem4-pass'>
				<td>杨路</td>
				<td>79</td>
			</tr>
			<tr class='tem4-failure'>
				<td>蔡怡静</td>
				<td>46</td>
			</tr>
			<tr class='tem4-pass'>
				<td>吴微</td>
				<td>75</td>
			</tr>
			<tr class='tem4-pass'>
				<td>王记</td>
				<td>72</td>
			</tr>
			<tr class='tem4-pass'>
				<td>申梦婧</td>
				<td>81</td>
			</tr>
			<tr class='tem4-pass'>
				<td>甘雨</td>
				<td>77</td>
			</tr>
			<tr class='tem4-pass'>
				<td>鲍宇蕾</td>
				<td>61</td>
			</tr>
			<tr class='tem4-failure'>
				<td>李响</td>
				<td>33</td>
			</tr>
			<tr class='tem4-pass'>
				<td>王洋</td>
				<td>76</td>
			</tr>
			<tr class='tem4-pass'>
				<td>沈怡隽</td>
				<td>70</td>
			</tr>
			<tr class='tem4-pass'>
				<td>赵培元</td>
				<td>83</td>
			</tr>
			<tr class='tem4-pass'>
				<td>谭小娟</td>
				<td>76</td>
			</tr>
			<tr class='tem4-pass'>
				<td>蒋蕊楠</td>
				<td>76</td>
			</tr>
			<tr class='tem4-pass'>
				<td>李晶</td>
				<td>74</td>
			</tr>
			<tr class='tem4-pass'>
				<td>张斌</td>
				<td>78</td>
			</tr>
		</tbody>
	</table>
	<div class='input-data'>
		姓名: <input type="text" id='nameInput' tabindex='1' maxlength='4'>
		成绩：<input type="text" id='markInput' tabindex='2' maxlength='3'>
		<input type="button" value="提交" id='j_add'>
	</div>
</body>
	<script>
		var addContent = {};
		addContent.getInformation = function() {
			var tbody = document.getElementById('mark-table');
			index = tbody.getElementsByTagName('tr').length;
			var mark = document.getElementById('markInput');
			var name = document.getElementById('nameInput');
			addContent.regData(name,mark,tbody,index);
// console.log(this); 这里this指代的是button
		}
		addContent.regData = function(name,mark,tbody,index) {
			// 应该要匹配两个及以上汉字的……这里还要完善
			var regexName = /^[\u4E00-\u9FFF]+$/;
			var regexMark = /^(100|\d|[1-9]\d)$/;
			if( regexName.test(name.value) ) {
				if( regexMark.test(mark.value) ) {
					this.setInformation(name,mark,tbody,index); 
				}
				else {
					this.illegalInput('成绩不正确',mark);
				}
			}
			else {
				this.illegalInput('名字不正确',name);
			}
		}
		addContent.illegalInput = function(errorMsg,errorInput) {
			alert(errorMsg);
			// 获得焦点，并选中文字
			errorInput.focus();
			errorInput.select();
			return;
		}
		addContent.setInformation = function(name,mark,tbody,index) {
			var className=(mark.value<60)?'tem4-failure':'tem4-pass';
			var insertRow = tbody.insertRow(index);
			insertRow.className=className;
			var _name = insertRow.insertCell(0);
			var _mark = insertRow.insertCell(1);
			_name.innerHTML = name.value;
			_mark.innerHTML = mark.value;
		}
		// 保存数据，即网页
		addContent.init = function(){
			// 获取ID添加动作
			var submit = document.getElementById('j_add');
			submit.onclick=this.getInformation;
		}
		addContent.init();
	</script>
</html>